<template>
    <el-card class="card-bottom">
        <el-form :model="queryInfo.form" :inline="true" label-width="80px">
            <el-form-item label="关键字">
                <el-select width="100px" v-model="queryInfo.form.resourceType" placeholder="Select" size="small" @change="typeHandler">
                    <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-input clearable v-model="queryInfo.form.keyWord" size="small" placeholder="请输入关键字"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="menuPermissionList">搜索</el-button>
            </el-form-item>
        </el-form>
    </el-card>
    <el-card>
        <el-row>
            <el-col :span="12">
                <p style="font-size: 18px;">菜单权限</p>
            </el-col>
            <el-col :span="12">
                <div style="float:right;">
                    <el-button type="primary" @click="handleClick(1, null)">添加</el-button>
                </div>
            </el-col>
        </el-row>
        <el-divider></el-divider>

        <!-- data list -->
        <el-table
        :data="dataInfo.menuPermissionDataArray"
        style="width: 100%"
        row-key="resourceId"
        :default-expand-all="true"
        border
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
            <el-table-column fixed="left" prop="resourceId" label="ID" align="center" />
            <el-table-column fixed="left" prop="resourceName" label="资源名称" align="center" width="150">
                <template v-slot:header='scope'>
                    <span>
                        资源名称
                        <el-tooltip
                        effect="dark"
                        content="resourceName"
                        placement="top">
                        <el-icon><QuestionFilled /></el-icon>
                        </el-tooltip>
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="routerName" label="组件路由" align="center" width="170">
                <template v-slot:header='scope'>
                    <span>
                        组件路由
                        <el-tooltip
                        effect="dark"
                        content="routerName"
                        placement="top">
                        <el-icon><QuestionFilled /></el-icon>
                        </el-tooltip>
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="routerPath" label="菜单路由url" align="center" width="150">
                <template v-slot:header='scope'>
                    <span>
                        菜单路由url
                        <el-tooltip
                        effect="dark"
                        content="routerPath"
                        placement="top">
                        <el-icon><QuestionFilled /></el-icon>
                        </el-tooltip>
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="component" label="映射组件路径" align="center" width="350">
                <template v-slot:header='scope'>
                    <span>
                        映射组件路径
                        <el-tooltip
                        effect="dark"
                        content="component"
                        placement="top">
                        <el-icon><QuestionFilled /></el-icon>
                        </el-tooltip>
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="resourceType" label="资源类型" align="center" width="100">
                <template #default="scope">
                    <div v-if="scope.row.resourceType==1">
                        <el-tag effect="dark" type="info">目录</el-tag>
                    </div>
                    <div v-else-if="scope.row.resourceType==2">
                        <el-tag effect="dark" type="success">菜单</el-tag>
                    </div>
                    <div v-else>
                        <el-tag effect="dark">页面元素/按钮</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="icon" label="图标" align="center" width="100">
                <template #default="scope">
                    <el-icon>
                        <component :is="scope.row.icon" />
                    </el-icon>
                </template>
            </el-table-column>
            <el-table-column prop="description" label="资源描述" align="center" width="100" />
            
            
            <el-table-column prop="permissionElement" label="权限活动标识" align="center" width="120" />
            <el-table-column prop="permissionCode" label="权限编码" align="center" width="100" />

            <el-table-column prop="sort" label="排序" />
            <el-table-column prop="createTime" label="创建时间" align="center" width="180" />
            <el-table-column prop="updateTime" label="更新时间" align="center" width="180" />
            <el-table-column fixed="right" label="操作" align="center" width="120">
            <template #default>
                <el-button link type="primary" size="small">编辑</el-button>
                <el-button link type="primary" size="small">删除</el-button>
            </template>
            </el-table-column>
        </el-table>

        <Pagination :total="dataInfo.totalSize" @changeHandler="changeHandler" />

        <el-dialog title="增加菜单权限" width="600" v-model="menuPermissionDialog.add" v-if="menuPermissionDialog.add" @close="closeHandle(1)">
            <MenuPermissionAddDialog :menuPermissionData="dataInfo.menuPermissionDataArray" :defaultExpandedKeys="dataInfo.defaultExpandedKeys" @addResult="addResult" />
        </el-dialog>


        <!-- 菜单权限编辑 -->
        <el-dialog title="编辑菜单权限" width="600" v-model="menuPermissionDialog.edit" v-if="menuPermissionDialog.edit" @close="closeHandle(2)">
            <MenuPermissionEditDialog :menuPermissionInfo="dataInfo.menuPermissionInfo" @editResult="editResult" />
        </el-dialog>


    </el-card>
</template>

<script setup>
// API
import { getMenuPermission } from "@/api/permission"

import { reactive, ref } from 'vue';

import Pagination from '@/components/pagination/index.vue'
import MenuPermissionAddDialog from '@/views/permissionuser/components/MenuPermissionAddDialog.vue'
import MenuPermissionEditDialog from '@/views/permissionuser/components/MenuPermissionEditDialog.vue'

components: { MenuPermissionAddDialog, MenuPermissionEditDialog, Pagination }

const selectOptions = [
    {
        value: "1",
        label: "资源名称"
    },
    {
        value: "2",
        label: "菜单路由url",
    },
    {
        value: "3",
        label: "组件路由",
    }
]

const typeHandler = (val) => {
    console.log("变更了！", val)
    queryInfo.form.resourceType = val
}

const queryInfo = reactive({
    form: {
        keyWord: '',
        resourceType: '1',
        // 当前第多少页
        pageNum: 1,
        // 每页显示条数
        pageSize: 10,
    }
})

const dataInfo = reactive({
    menuPermissionDataArray: [],
    defaultExpandedKeys: [],
    menuPermissionInfo: {},
    totalSize: 0
})


const menuPermissionList = async () => {
    const { data: res } = await getMenuPermission(queryInfo.form)
    console.log("权限数据：", res.content)
    dataInfo.totalSize = res.totalSize
    dataInfo.menuPermissionDataArray = res.content

    getDefaultExpandedKeys(dataInfo.menuPermissionDataArray)

}
menuPermissionList()

const getDefaultExpandedKeys = (array) => {
    // 获取展开keys
    array.forEach(item => {
        if (!item.hasChildren) {
            dataInfo.defaultExpandedKeys.push(item.value)
            getDefaultExpandedKeys(item.children)
        }
    })
}

const changeHandler = (type, num) => {
    console.log(type)
    console.log(num)
    if (type === 'sizechange') {
        queryInfo.form.pageSize = num
        queryInfo.form.pageNum = 1
    }
    if (type === 'currentchange') {
        queryInfo.form.pageNum = num
    }
    menuPermissionList()
}


const handleClick = (flag, userData) => {
    if (flag == 1) {    // 增加
        menuPermissionDialog.add = true
    } else if (flag == 2) { // 编辑
        dataInfo.userInfo = userData
        menuPermissionDialog.edit = true
    } else if (flag == 3) { // 禁用/启用

    } else {
        // 删除
    }
}

const menuPermissionDialog = reactive({
    add: false,
    edit: false
})
const closeHandle = (flag) => {
    if (flag == 1) {    // 关闭增加弹框
        menuPermissionDialog.add = false
    }
    if (flag == 2) {    // 关闭编辑弹窗
        menuPermissionDialog.edit = false
    }
}

/**
 * 菜单权限添加结果
 */
const addResult = (result) => {
    console.log("添加结果：", result)
    if (result) {   // 成功添加
        // 关闭菜单权限添加弹窗
        menuPermissionDialog.add = false
        // 重新请求菜单权限列表
        menuPermissionList()
    }
}

/**
 * 菜单权限编辑结果
 * result： 1.成功 2.取消
 */
const editResult = (result) => {
    console.log("编辑结果：", result)
    if (result === 1) {
        menuPermissionList()
    }
    menuPermissionDialog.edit = false
}


</script>


<style scoped lang="scss">
.el-select--small {
    width: 90px;
    padding-right: 20px;
}

.el-input--small {
    width: 130px;
}
</style>